<template>  
  <div class="registerWrapper">  	
    <div class="formWrapper"> 
      <h1 class="registerTitle">★人防指挥所★</h1>
      <h1 class="registerTitle" v-text="registerTitle"></h1>      
      <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-postion="left"
          label-width="0px"
          class="demo-ruleForm"          
      >
        <el-form-item prop="username">
          <el-input
              prefix-icon="el-icon-user"
              v-model="ruleForm.username"
              placeholder="用户名"
          ></el-input>
        </el-form-item>        
        <el-form-item prop="password">
          <el-input
              prefix-icon="el-icon-lock"
              v-model="ruleForm.password"
              placeholder="密码"
              show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="role">
		  <el-select style="width: 375px"
				prefix-icon="el-icon-lock" 
				v-model="ruleForm.role" 
				placeholder="角色选择"
				ref="select_icon"
		  >
			<el-option label="admin" value="admin"></el-option>
			<el-option label="test" value="test"></el-option>
		  </el-select>
		</el-form-item>		
        <el-form-item style="user-select: none;">
          <drag-verify
              ref="dragVerifyRef"
              text="请按住滑块拖动解锁"
              successText="验证通过"
              handlerIcon="el-icon-d-arrow-right"
              successIcon="el-icon-circle-check"
              :width="375"
              handlerBg="#F5F7FA"
              :isPassing.sync="isPassing"
              @update:isPassing="updateIsPassing"
          ></drag-verify>
        </el-form-item>        
        <el-form-item class="registerButtonWrapper">
        <el-button-group>
          <el-button
              class="registerButton"
              type="primary"
              :disabled="submitDisabled"
              @click="submitForm('ruleForm')"
          >添加用户
          </el-button>
          <el-button
          	  class="registerButton"
              type="success"
              @click="rettohonme"
          >返回
          </el-button>
        </el-button-group>
        </el-form-item>
       
      </el-form>      
    </div>
  </div>
</template>

<script>
import DragVerify from '/@/components/dragVerify/dragVerify.vue'
import { addUser } from '/@/request/user.js'
//import { useRouter } from 'vue-router';
//import { Session } from '/@/utils/storage';


// 配置
const config = {
  color: '230, 162, 60', // 线条颜色
  pointColor: '230, 162, 60', // 节点颜色
  opacity: 0.5, // 线条透明度
  count: 99, // 线条数量
  zIndex: -1 // 画面层级
}

export default {
  name: 'Register',
  components: {DragVerify},
  data() {
    return {
      registerTitle: '管理员添加用户',
      ruleForm: {
        username: '',
        password: '',
        role:'',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {
            min: 2,
            max: 16,
            message: '长度在2到16个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            min: 2,
            max: 20,
            message: '长度在2到20个字符',
            trigger: 'blur'
          }
        ],       
        role: [
          {required: true, message: '请选择角色', trigger: 'blur'},
          {
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }
        ]
      },
      isPassing: false,
      submitDisabled: true,
    }
  },
  computed: {
    url() {
      if(window.history.length>1){
        	this.$router.back();
	      }else{
	        this.$router.push('/login');
	  } 
    }
  },
  watch: {
    //  已验证通过时，若重新输入邮箱、用户名或密码，滑动解锁恢复原样   
    'ruleForm.userName'() {
      this.isPassing = false
      this.submitDisabled =true
      this.$refs.dragVerifyRef.reset()
    },
    'ruleForm.password'() {
      this.isPassing = false
      this.submitDisabled =true
      this.$refs.dragVerifyRef.reset()
    },
    'ruleForm.role'() {
      this.isPassing = false
      this.submitDisabled =true
      this.$refs.dragVerifyRef.reset()
    }
  },
  created() {
  },
  methods: {
  
    //  滑动解锁完成    
    updateIsPassing(isPassing) {    
      this.submitDisabled = !isPassing
    },
    //  注册按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //  各项校验通过
          let info = {
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            role: this.ruleForm.role,
          }
          addUser(info).then(() => {
            //	这里的返回字段需要和后台重新商议
            this.$notify({
              title: '成功',
              message: '注册成功！已跳转到登录页面',
              type: 'success'
            })
            this.$refs[formName].resetFields();
            this.$router.replace({path: '/login'})
          }).catch(err => {
            console.error(err)
            ElMessage.error("用户注册失败")
          })
        } else {
          ElMessage.error('请完善信息！')
          return false
        }
      })
    },
    rettohonme(){
    	if(window.history.length>1){
        	this.$router.back();
	      }else{
	        this.$router.push('/home');
	      }    	
    }
  }
}
</script>
<style lang="stylus" scoped>
.registerWrapper
  background: url("/@/assets/vadmin-mock/visualizing/demo2.jpg") no-repeat
  background-size: 100% 100%
  height: 100% !important
  width: 100% !important
  padding-top: 100px

  .formWrapper
    width: 375px
    margin: 0 auto
    text-align: center

    .registerTitle
      margin-bottom: 20px
      font-weight: 300
      font-size: 30px
      color: #f00
      
    .demo-ruleForm
      width: 100%
      margin-top: 10px

      :v-deep .el-form-item__content
        margin-right: 100 !important

      & :v-deep .el-input__inner
        font-size: 16px

      .registerButtonWrapper
        .registerButton
          width: 160px
          margin:10px
  		  
        & :v-deep .el-button
          font-size: 16px
</style>
